<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>WICD Core 1.0 #20-2 - rightsizing to percentage width</title>
  <link rel="stylesheet" type="text/css" href="resources/main.css"/>
  <link rel="stylesheet" type="text/css" href="resources/test-rightsizing-b.css"/>
</head>
<body>
    <div>
        <h1>rightsizing to percentage width</h1>
        <h4>WICD Core 1.0 #20-2</h4>
        <object data="resources/test-svg-child-object-rightsizing.svg" width="40%" type="image/svg+xml">[SVG NOT SUPPORTED]</object>
        <object data="resources/test-svg-child-object-rightsizing.svg" width="20%" type="image/svg+xml">[SVG NOT SUPPORTED]</object>
        <object data="resources/test-svg-child-object-rightsizing.svg" width="10%" type="image/svg+xml">[SVG NOT SUPPORTED]</object>
        <object data="resources/test-svg-child-object-rightsizing.svg" width="5%" type="image/svg+xml">[SVG NOT SUPPORTED]</object>
        <p>
            Above there must be four times the same, square SVG child visible, each referenced by an object element with different widths (40%, 20%, 10%, 5%) and no height defined.
            <br/><br/>
            Beyond there is the same, only with PNG images instead of SVG.
        </p>
        <object data="resources/test-svg-child-object-rightsizing.png" width="40%" type="image/png"/>
        <object data="resources/test-svg-child-object-rightsizing.png" width="20%" type="image/png"/>
        <object data="resources/test-svg-child-object-rightsizing.png" width="10%" type="image/png"/>
        <object data="resources/test-svg-child-object-rightsizing.png" width="5%" type="image/png"/>
        <p>
            This test has succeeded, if both rows look exactly the same (SVGs must be square!) and no red background color is visible.
        </p>
        <p><br/><a href="javascript:history.back()">Back</a></p>
    </div>
    <script src="../../resources/run-after-layout-and-paint.js"></script>
    <script>
    if (window.testRunner)
        testRunner.waitUntilDone();
    onload = function() {
        runAfterLayoutAndPaint(function() {
            runAfterLayoutAndPaint(function() { }, true)
        }, false);
    };
    </script>
</body>
</html>

